<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 当我们的屏幕大于等于640px以上的，我们让div 一行显示俩 */
        /* 当我们屏幕小于640 我们让div一行 */
        /* 一个建议：我们媒体查询最好的方法是从小到大 */
        /* 引入资源就是 针对不同的屏幕尺寸 调用不同的css文件 */
    </style>
    <!-- 代码从上往下执行  先小后大大屏会吧小屏样式覆盖掉 -->
    <link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="css/style640.css" media="screen and (min-width:640px)">
</head>

<body>
    <!-- 当样式比较多的时候，我们可以针对不同stylesheet -->
    <div>1</div>
    <div>2</div>
</body>

</html>